<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Web Components</title>
  </head>
  <body>
    <button onclick="openModal()">打开弹窗</button>
    <my-modal class="test-modal" title="测试弹窗" visible="false">
      测试测试测试
    </my-modal>
    <!-- 以下是组件 -->
    <template id="my-modal">
      <div class="modal-mask">
        <div class="modal-body">
          <div class="ticket-header">
            <div class="ticket-title">
              <!-- title标题 -->
              <div class="title_bottom"></div>
            </div>
            <!-- 关闭按钮 -->
            <div class="right-btn-div">
              <button class="close-btn">关闭</button>
            </div>
          </div>
          <div class="ticket-body">
            <slot></slot>
          </div>
          <div class="ticket-footer">
            <!-- <slot name="modal-footer"></slot> -->
            <button class="layui-btn form-main-btn">进行人脸验证</button>
          </div>
        </div>
      </div>
      <style>
        /* 弹窗样式 */
        .modal-mask {
          display: none;

          position: fixed; /* Stay in place */
          z-index: 999; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0, 0, 0); /* Fallback color */
          background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
        }

        .modal-body {
          display: none;

          padding: 16px;
          border-radius: 8px;
          width: 600px;
          height: fit-content;
          background: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .layui-icon-close {
          cursor: pointer;
        }

        .ticket-back {
          position: absolute;
          top: 0;
          left: 0;
        }
        .txt-btn {
          border: none;
          display: flex;
          align-items: center;
        }
        .ticket-header {
          position: relative;
          display: grid;
          place-items: center;
          margin-bottom: 16px;
        }
        .ticket-header .ticket-title {
          position: relative;

          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 16px;
          color: #000000;
        }
        .ticket-header .ticket-title .title_bottom {
          width: 8px;
          height: 3px;
          background: #00b42a;
          position: absolute;
          bottom: -4px;
          left: 50%;
          translate: transformY(-50%);
        }
        .right-btn-div {
          position: absolute;
          top: 0;
          right: 0;
        }
        .ticket-body {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #4e5969;
          padding: 0 32px;
        }
        .ticket-body .verify-txt {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #4e5969;
          margin-bottom: 8px;
        }
        .ticket-body .body-info {
          padding: 20px;

          background: #f8f8f8;
          border-radius: 10px;
        }
        .ticket-body .body-info .info-item {
          display: flex;
          align-items: center;
        }
        .ticket-body .body-info .info-label {
          width: 100px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #86909c;
        }
        .ticket-body .body-info .info-txt {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #1d2129;
        }
        .ticket-footer {
          display: flex;
          justify-content: flex-end;
        }

        .verify-fail {
          color: var(--fail-color);
          text-align: center;
        }
        .verify-success {
          color: var(--main-color);
          text-align: center;
        }
        .verify-fail,
        .verify-success {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          margin-top: 18px;
          margin-bottom: 18px;
        }
        .verify-ticket-body {
          display: grid;
          place-items: center;
        }
        .verify-ticket-body .btn-group {
          margin-top: 26px;
          margin-bottom: 48px;
        }
        .qr-code {
          margin-top: 8px;
        }
        /* 支付宝微信切换 */
        .zfb-btn,
        .wx-btn {
          width: 148px;
          border-radius: 100px;

          background: #ffffff;
          box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.1);

          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #1d2129;
        }
        .zfb-btn-active .zfb-btn {
          color: #fff;
          background: #009fe8;
          box-shadow: 0px 6px 6px 0px rgba(0, 159, 232, 0.1);
        }

        .wx-btn-active .wx-btn {
          color: #fff;

          background: #28c445;
          box-shadow: 0px 6px 6px 0px rgba(40, 196, 69, 0.1);
        }
        .wx-btn-active .wx-txt,
        .zfb-btn-active .zfb-txt {
          display: block;
        }
        .zfb-btn-active .wx-txt,
        .wx-btn-active .zfb-txt,
        .zfb-btn-active .zfb-btn-icon,
        .zfb-btn-active .wx-btn-icon-active,
        .wx-btn-active .zfb-btn-icon-active,
        .wx-btn-active .wx-btn-icon {
          display: none;
        }
        /* 成功和失败 */
        .verify-fail-body .verify-fail,
        .verify-success-body .verify-success {
          display: block;
        }
        .verify-fail-body .verify-success,
        .verify-success-body .verify-fail {
          display: none;
        }
      </style>
      <link rel="stylesheet" href="./style/common.css" />
    </template>
    <!-- 以下是逻辑 -->
    <script src="./components/MyModal.js"></script>
    <script>
      function openModal() {
        const myComponent = document.querySelector('.test-modal')
        myComponent.setAttribute('visible', true)
      }
      document
        .querySelector('my-modal.test-modal')
        .addEventListener('closeclose', (e) => {
          console.log('弹窗已关闭！', e)
        })
    </script>
  </body>
</html>
